<template>
  <!-- 常用功能 -->
  <div class="common-tool">
    <div class="common-tool-box" v-loading="loadObj.commonTool">
      <template v-for="item in toolArr">
        <div class="tool-block" v-if="item.showNum > 0">
          <div class="tool-ul">
            <div class="tool-title">{{ item.typeName }}</div>
            <template v-for="sItem in item.listFunction">
              <div class="tool-li" @click="openTool(sItem.url)" v-if="sItem.name != '编辑' && !sItem.isHidden">
                <div class="tool-img" v-cloak>
                  <!-- <img :src="sItem.icon16 || sItem.icon64 || sItem.icon96 ||  commonUrl" alt=""> -->
                  <img :src="sItem.icon16" alt=""
                    v-if="sItem.icon16.slice(0, 4) == 'http' || sItem.icon16.slice(0, 4) == 'data'">
                  <i class="awsui-iconfont" :style="{ color: sItem.icon16.split('|')[1] }" v-else>{{
        entityToChar(sItem.icon16.slice(0,
          sItem.icon16.indexOf('|'))) }}</i>
                </div>
                <div class="tool-text" :title="sItem.name.length > 5 ? sItem.name : ''">{{ sItem.name }}</div>
              </div>
            </template>
          </div>
        </div>
      </template>
    </div>
    <div class="more-box" @click="openAllTool">
      <i class="el-icon-more"></i>
    </div>

    <el-dialog custom-class="custom-dialog" title="通用功能" :visible.sync="dialogVisible"
      v-loading="loadObj.commonToolDialog" @close="searchOtherMenuFn" width="10.1rem">
      <i class="el-icon-edit show-edit-icon" @click="showEidt" :title="isShowEditTool ? '隐藏编辑' : '显示编辑'"></i>
      <div class="dialog-body dialog-tool-body">
        <div class="dialog-tool-block" v-for="(item, index) in toolArr" :key="index">
          <template v-if="item.showNum > 0 || isShowEditTool">
            <div class="dialog-tool-title">
              {{ item.typeName }}
            </div>
            <div class="dialog-tool-ul">
              <template v-for="sItem in item.listFunction">
                <div class="dialog-tool-li" @click="openTool(sItem.url, item.listFunction, index)" v-if="(!sItem.isHidden && sItem.name != '编辑') || (isShowEditTool && sItem.name == '编辑')">
                  <div class="dialog-tool-img">
                    <template v-if="sItem.name != '编辑' && !sItem.isCy">
                      <span class="common-text" :class="{ 'is-cy': !sItem.isCy }"
                        @click.stop="addCommonMenuFn(sItem.functionId)">添加为常用</span>
                    </template>
                  
                    <img :src="sItem.icon16" alt=""
                      v-if="sItem.icon16.slice(0, 4) == 'http' || sItem.icon16.slice(0, 4) == 'data'">
                    <i class="awsui-iconfont" :style="{ color: sItem.icon16.split('|')[1] }" v-else>{{
                    entityToChar(sItem.icon16.slice(0,
                      sItem.icon16.indexOf('|'))) }}</i>
                  </div>
                  <div class="dialog-tool-text" :title="sItem.name.length > 5 ? sItem.name : ''">{{ sItem.name }}</div>
                </div>
              </template>
            </div>
          </template>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button size="mini" @click="dialogVisible = false">关 闭</el-button> -->
        <el-button size="mini" type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 常用场景 -->
    <el-dialog custom-class="custom-dialog" title="常用场景" :visible.sync="dialogCommonVisible"
      v-loading="loadObj.commonMenuDialog" width="6rem">
      <div class="dialog-body dialog-common-body">
        <div class="dialog-common-ul">
          <template v-for="item in commonMenuArr">
            <div class="dialog-common-li" v-if="item.name != '编辑'" @click="openTool(item.url)">
              <div class="dialog-common-img">
                <img :src="item.icon96 || item.icon64 || item.icon16 || commonUrl" alt="">
                <i class="el-icon-circle-plus common-add" v-if="item.isHidden" title="添加通用功能"
                  @click.stop="showCommonFn(true, item.functionId)"></i>
                <i class="el-icon-remove common-del" v-else title="隐藏通用功能"
                  @click.stop="showCommonFn(false, item.functionId)"></i>
              </div>
              <div class="dialog-common-text">{{ item.name }}</div>
            </div>
          </template>
        </div>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogCommonVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="comfirmCommonFn">确 定</el-button>
      </span> -->
    </el-dialog>

  </div>
</template>

<script>
import { getFunctionApi, addCommonMenuApi, showFunctionApi } from "../api/myHome"
export default {
  name: '',
  mixins: [],
  components: {
  },
  props: {
  },
  data() {
    return {
      sid: this._sid,
      commonUrl: require("../assets/img/myHome/edit.png"),
      editUrl: require("../assets/img/myHome/edit.png"),
      dialogVisible: false,
      dialogCommonVisible: false,
      obj: { url: require("../assets/img/myHome/edit.png"), title: "编辑", isAdd: false },
      toolArr: [],
      commonMenuArr: [], // 常用
      commonIndex: 0,
      loadObj: {
        commonTool: false,
        commonToolDialog: false,
        commonMenuDialog: false
      },
      isShowEditTool: false
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this.getFunctionFn()
  },
  methods: {
    entityToChar(entity) {
      const txt = document.createElement('textarea');
      txt.innerHTML = entity;
      return txt.value;
    },
    openTool(url, arr = [], index = 0) {
      if (url) {
        window.open(url)
      } else {
        this.dialogCommonVisible = true
        // this.getCommonMenuFn()  
        this.commonMenuArr = arr
        this.commonIndex = index
        console.log("arr", arr)
      }
    },
    openAllTool() {
      this.dialogVisible = true
    },
    getFunctionFn() {
      this.loadObj.commonToolDialog = true
      getFunctionApi(this.sid).then(res => {
        this.loadObj.commonToolDialog = true
        if (res.result == "ok") {
          this.toolArr = res.data
          for (let i = 0; i < this.toolArr.length; i++) {
            let obj = {
              name: '编辑',
              icon16: this.editUrl,
              icon64: this.editUrl,
              icon96: this.editUrl,
              isCy: true,
              url: null
            }
            
            if (this.toolArr[i].listFunction.length > 0) {
              this.toolArr[i].showNum = 0
              for(let j=0; j<this.toolArr[i].listFunction.length; j++) {
                if(!this.toolArr[i].listFunction[j].isHidden) {
                  this.toolArr[i].showNum++
                }
              }
              this.toolArr[i].listFunction.push(obj)
            }
          }
          this.commonMenuArr = this.toolArr[this.commonIndex].listFunction
          console.log("this.commonMenuArr", this.toolArr)
        }
      })
    },
    addCommonMenuFn(id) {
      this.loadObj.commonToolDialog = true
      addCommonMenuApi(this.sid, 'new', id).then(res => {
        if (res.result == 'ok') {
          this.getFunctionFn()
          this.$message({
            message: '添加为常用成功',
            type: 'success'
          })
        }
        this.loadObj.commonToolDialog = false
      })
    },
    showCommonFn(bool, functinId) {
      this.loadObj.commonMenuDialog = true
      showFunctionApi(this.sid, bool ? 'show' : 'hidden', functinId).then(res => {
        this.loadObj.commonMenuDialog = false
        if (res.result == 'ok') {
          this.getFunctionFn()
          // this.$emit('searchCommonMenu')
        }
      })
    },
    searchOtherMenuFn() {
      this.isShowEditTool = false
      this.$emit("searchCommonMenuToolFn")
    },
    showEidt() {
      this.isShowEditTool = !this.isShowEditTool
    }
  }
}
</script>

<style scoped lang="scss">
@import "../style/common.scss";
@import '../style/iconfont.css';

.common-tool {
  .common-tool-box {
    height: 7.2rem;
    overflow: hidden;
    scrollbar-width: none;
    overflow-y: auto;

    .tool-block {
      padding: 0 $pad-insert $pad-insert $pad-insert;

      .tool-ul {
        margin-top: 0.05rem;

        &:after {
          content: "";
          display: block;
          clear: both;
        }

        .tool-title {
          font-size: $small-size;
          font-weight: bold;
          text-align: left;
          // padding: 0.1rem 0;
        }

        .tool-li {
          width: 1.2rem;
          float: left;
        
          cursor: pointer;
          margin:  0.25rem  0.0175rem 0  0.0175rem;

          .tool-img {
            width: 100%;
            height: 0.4rem;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;

            i {
              font-size: 0.3rem;
            }

            img {
              width: 0.35rem;
              height: auto;
            }
          }

          .tool-text {
            font-size: $min-size;
            text-align: center;
            margin-top: 0.05rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
       
          }
        }
      }
    }
  }

  .more-box {
    width: 0.6rem;
    height: 0.6rem;
    box-shadow: 0rem 0rem 0.1rem #ebebeb;
    border-radius: 0.2rem;
    text-align: center;
    position: absolute;
    bottom: 0.1rem;
    right: 0.1rem;
    cursor: pointer;

    i {
      line-height: 0.6rem;
      font-size: 0.3rem;
    }

    &:hover {
      box-shadow: 0rem 0rem 0.1rem #cdcdcd;
    }
  }
}
.show-edit-icon {
  cursor: pointer;
  padding-left: 0.1rem;
  position: absolute;
  top: 0.31rem;
  left: 1.3rem;
}
.dialog-tool-body {
  height: 4rem;
  overflow-y: auto;
  scrollbar-width: none;
 
  .dialog-tool-block {
    margin-top: 0.1rem;

    .dialog-tool-title {
      font-size: 0.2rem;
      font-weight: bold;
      color: #333;
      text-align: left;
      // margin-top: 0.25rem;
      margin-bottom: 0.25rem;
      
    }

    .dialog-tool-ul {
      width: 1rem;
      text-align: center;
      font-size: $min-size;
      display: flex;
      flex-wrap: wrap;
      width: 100%;

      .dialog-tool-li {
        cursor: pointer;
        width: 0.8rem;
        padding-bottom: 0.2rem;
        padding-left: 0.1rem;

        .dialog-tool-img {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          height: 0.3rem;
          position: relative;

          .common-text {
            display: none;
            background-color: #ccc;
            padding: 0.05rem 0.1rem;
            position: absolute;
            top: -0.1rem;
            border-radius: 0.05rem;
            white-space: nowrap;
            font-size: 0.155rem;
            align-items: center;
            justify-content: center;
          }

          &:hover {
            .is-cy {
              display: flex;
            }
          }

          img {
            height: 100%;
          }
        }

        .dialog-tool-text {
          width: 100%;
          margin-top: 0.1rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}

.dialog-common-body {
  height: 3rem;
  overflow-y: auto;
  scrollbar-width: none;

  .dialog-common-ul {
    width: 1rem;
    text-align: center;
    font-size: $min-size;
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    .dialog-common-li {
      cursor: pointer;
      width: 0.8rem;
      padding-bottom: 0.2rem;
      padding-left: 0.1rem;

      .dialog-common-img {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        height: 0.3rem;

        img {
          height: 100%;
        }

        .common-del {
          color: #ccc;
        }

        .common-add {
          color: #2c64df;
        }
      }

      .dialog-common-text {
        width: 100%;
        margin-top: 0.1rem;
      }
    }
  }
}
</style>
